 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>Jalava : Web-based Diagram Editor</title>
    <script language="JavaScript" src="./js/Jalava.js"></script>
	<script language="JavaScript" src="./js/DOM.js"></script>
	<script language="JavaScript">
		// initialise Jalava here
	    function initJalava(){
		
		/*
	      Jalava.diagram = new Diagram(220, 0, "550", "600");		  
	      var palette = new Palette(new PaletteFactory(), 0, 0, 200);
	      palette.addItem("rect", "Rectangle", Palette.DRAG_TOOL, "./img/rect.gif");
	      palette.addItem("connection", "Connection", Palette.CLICK_TOOL, "./img/line.gif");	      
	      Jalava.propertyPage = new PropertyPage(0, 100, 10);*/
	      var width = parent.document.getElementById("txtDiagramWidth").value;
	      var height = parent.document.getElementById("txtDiagramHeight").value;
	      
		  //Jalava.diagram = new Diagram(140, 0, "800", "490");
		  Jalava.diagram = new Diagram(140, 0, width, height);
		  var palette = new Palette(new FlowChartPaletteFactory(), 0, 0, 130);
		  palette.addItem("begin", "Inicio", Palette.DRAG_TOOL, "./img/begin.gif");
		  palette.addItem("rect", "Proceso", Palette.DRAG_TOOL, "./img/rect.gif");
		  palette.addItem("diamond", "Decision", Palette.DRAG_TOOL, "./img/diamond.gif");
		  palette.addItem("end", "Fin", Palette.DRAG_TOOL, "./img/end.gif");
		  //palette.addItem("parallel", "Input/Output", Palette.DRAG_TOOL, "./img/parallel.gif");
		  //palette.addItem("ellipse", "Connector", Palette.DRAG_TOOL, "./img/ellipse.gif");
		  palette.addItem("connection", "Conector", Palette.CLICK_TOOL, "./img/line.gif");
		  //palette.addItem("swimlane", "Swimlane", Palette.CLICK_TEMPORARY_TOOL, "./img/swimlane.gif");
		  //Jalava.propertyPage = new FlowChartPropertyPage(0, 280, 10); 
		  
		  Jalava.palette = palette;
		  
		  Jalava.diagram.load(parent.document.getElementById("txtDiagramJson").value);
	    }
		//function cargar(){
		Jalava.addModule("UrlGradientBlock");
		Jalava.addModule("FlowChartPropertyPage");
		Jalava.addModule("FlowChartPaletteFactory");
		// start Jalava
		
		Jalava.start(initJalava);
		//}
		
		function cargar(){
			var btnCargar = parent.document.getElementById("btnCargar");
			btnCargar.click();
		}
		
		function actualizaStage(strName){
			 if (Jalava.temp_var.selected) {
			    Jalava.diagram.getFigure(Jalava.temp_var.selected.id).udpateContent(strName);
			 }
		}
		
		function deleteDiagramComponent(strName){
			 if (Jalava.temp_var.selected) {
				 
			    Jalava.diagram.removeFigure(Jalava.temp_var.selected.id);
			    delete Jalava.temp_var.selected;
			 }
		}
		
		function reziseDiagram(width, height){
			Jalava.diagram.resize(width, height);
		}
	</script>
  </head>
  <body style="vertical-align: top;">
  </body>
</html>  